<template>
	<view class="container">
		<!-- 加载状态提示 -->
		<view v-if="isLoading" class="loading">加载中...</view>

		<!-- 数据为空或错误时的提示 -->
		<view v-else-if="errorMsg" class="error-tip">{{ errorMsg }}</view>
		<view v-else-if="list.length === 0" class="empty-tip">暂无管理员数据</view>

		<!-- 列表项循环，数据从接口获取 -->
		<view class="item" v-for="(item, index) in list" :key="index" @click="copyWechat(item)">
			<!-- 学校名称和管理员信息 -->
			<view class="text-group">
				<text class="school-name">{{ item.school }}</text>
				<text class="admin-role">跑跑跑小程序管理员</text>
			</view>
			<!-- 微信图标 -->
			<image class="wechat-icon" src="/static/image/wx.png"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import {
		getGuanli
	} from '@/package/api/selList.js'

	// 定义响应式数据
	const list = ref([]);
	const isLoading = ref(false); // 加载状态
	const errorMsg = ref(''); // 错误提示信息

	// 页面显示时加载数据
	onShow(async () => {
		isLoading.value = true; // 显示加载状态

		// 获取学校ID
		const schoolId = uni.getStorageSync('school_id');
		if (!schoolId) {
			errorMsg.value = '未获取到学校ID，请确认登录状态';
			isLoading.value = false;
			return;
		}

		try {
			// 发送请求获取管理员数据
			const res = await getGuanli(schoolId);
			console.log('接口返回数据:', res.data);

			// 处理数据（假设接口返回格式为 { wechat, mobile, name }）
			if (res.data && res.code == 200) {
				list.value = [{
					school: res.data.name || '未知学校',
					wechat: res.data.wechat,
					mobile: res.data.mobile || '未提供',
					name: res.data.name || '管理员'
				}];
				errorMsg.value = '';
			} else {
				errorMsg.value = '数据格式错误，未获取到有效管理员信息';
				console.error('数据格式异常:', res.data);
			}
		} catch (error) {
			errorMsg.value = '网络请求失败，请检查网络连接';
			console.error('请求异常:', error);
		} finally {
			isLoading.value = false; // 隐藏加载状态
		}
	});

	// 复制微信号逻辑
	const copyWechat = (item) => {
		console.log(item)
		if (!item.wechat) {
			uni.showToast({
				title: '未获取到微信号',
				icon: 'none',
				duration: 1500
			});
			return;
		}

		uni.setClipboardData({
			data: item.wechat,
			success() {
				uni.showToast({
					title: '已复制微信号，可前往添加',
					icon: 'success',
					duration: 1500
				});
			},
			fail(err) {
				console.error('复制失败:', err);
				uni.showToast({
					title: '复制失败，请重试',
					icon: 'none',
					duration: 1500
				});
			}
		});
	};
</script>

<style scoped>
	.container {
		padding: 10px;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 8px;
		padding: 12px 15px;
		margin-bottom: 10px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.text-group {
		display: flex;
		flex-direction: column;
	}

	.school-name {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.admin-role {
		font-size: 16px;
		font-weight: bold;
		color: #666;
		margin-top: 4px;
	}

	.wechat-icon {
		width: 32px;
		height: 32px;
	}

	/* 加载状态样式 */
	.loading {
		text-align: center;
		padding: 20px 0;
		color: #999;
	}

	/* 错误提示样式 */
	.error-tip,
	.empty-tip {
		text-align: center;
		padding: 20px 0;
		color: #ff5500;
		font-size: 16px;
	}
</style>